<template>
  <div class="search-component">
    <el-input
        v-model="query"
        placeholder="搜索美食"
        @keyup.enter="search"
        class="custom-input"
    ></el-input>
    <el-button type="primary" @click="handleSearch" class="custom-button">
      <el-icon ><Search  /></el-icon> <!-- 使用放大镜图标 -->
    </el-button>
  </div>
</template>

<script>
import { ElInput, ElButton, ElIcon } from 'element-plus';
import { Search } from '@element-plus/icons-vue'; // 引入放大镜图标

export default {
  name: 'SearchComponent',
  components: {
    ElInput,
    ElButton,
    ElIcon,
    Search, // 注册图标组件
  },
  data() {
    return {
      query: '',
    };
  },
  methods: {
    search() {
      this.query = this.query.trim();
      this.$emit('search', this.query);
      console.log('query : ' + this.query);
    },
    handleSearch() {
      this.$router.push({name: 'DishList', query: {q : this.query}});
      // this.$router.push({ path: '/dish-list', query: { q: query } });
      console.log('query : ' + this.query);
    },
  },
};
</script>

<style scoped>
.search-component {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 600px; /* 限制搜索框的最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.custom-input {
  flex: 1;
  margin-right: 10px;
}

.custom-input .el-input__inner {
  border-radius: 20px; /* 输入框圆角 */
  padding: 10px 20px; /* 增加内边距 */
  font-size: 16px; /* 增大字体 */
  border: 1px solid #ccc; /* 边框颜色 */
  transition: border-color 0.3s ease; /* 添加过渡效果 */
}

.custom-input .el-input__inner:focus {
  border-color: #007bff; /* 聚焦时边框颜色 */
  outline: none; /* 去除默认聚焦轮廓 */
}

.custom-button {
  border-radius: 20px; /* 按钮圆角 */
  padding: 10px; /* 调整内边距 */
  font-size: 16px; /* 增大字体 */
  background-color: #007bff; /* 背景颜色 */
  border: none; /* 去除边框 */
  transition: background-color 0.3s ease; /* 添加过渡效果 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-button:hover {
  background-color: #0056b3; /* 悬停时背景颜色 */
}

.custom-button .el-icon {
  font-size: 20px; /* 调整图标大小 */
}
</style>
